<template>
	<view class="page" v-if="info">
		<view class="header">
			<image class="video-thumb" :src="info.thumb" v-if="!lessonSrc"></image>
			<video class="video-thumb" id="myVideo" :src="lessonSrc" @error="videoErrorCallback" controls
				v-if="lessonSrc"></video>
		</view>

		<view class="body">
			<text class="title">{{ info.title }}</text>

			<view class="desc">
				<text class="price">{{ info.price > 0 ? info.price : '免费' }}</text>
			</view>

			<view class="lesson">
				<view class="title">课程目录</view>
				<uni-list v-for="(item, index) in lessonList" :key="index">
					<uni-list-item :title="item.title" clickable @click="lessonPlay(item)" />
				</uni-list>
			</view>

			<view class="content">
				<view class="title">课程详情</view>
				<view class="desc">
					<rich-text :nodes="info.content"></rich-text>
				</view>
			</view>

		</view>

		<view class="footer">
			<button class="buy" type="primary" @click="goConfirm(info)" v-if="info.price > 0">立即购买</button>
			<button class="buy" type="primary" @click="enter(info)" v-else>免费报名</button>
		</view>
	</view>
</template>

<script>
	import htmlParser from '@/common/html-parser.js'
	export default {
		components: {},
		data() {
			return {
				id: '',
				info: null,
				lessonList: [],
				lessonSrc: ''
			}
		},
		onLoad(e) {
			this.id = e.id || '';
			this.getInfo()
			this.getLesson()
		},
		// 各端小程序 分享至好友或微信群
		onShareAppMessage(res) {
			return {
				title: this.info.name,
				path: this.$host + `/pages/course/detail?id=${this.id}`
			}
		},
		// 监听导航栏 （pages.json中的导航栏配置对应）
		onNavigationBarButtonTap(e) {
			let _index = e.index
			if (_index !== 0) return
			uni.share({
				provider: "weixin",
				scene: "WXSenceTimeline",
				type: 0,
				href: this.$host + `/pages/course/detail?id=${this.vid}`,
				title: `《${this.info.name}》`,
				summary: `《${this.info.name}》`,
				imageUrl: this.info.thumb,
				success: function(res) {
					console.log("success:" + JSON.stringify(res));
				}
			})
		},
		methods: {
			// 详情
			getInfo() {
				this.$store.dispatch('request', {
					url: `course/${this.id}`
				}).then((res) => {
					var htmlString = res.data.content.replace(/\\/g, "").replace(/<img/g, "<img style=\"max-width:100%;\"");
					res.data.content = htmlParser(htmlString);
					this.info = res.data
				}).catch((error) => {
					console.log(error)
				})
			},
			getLesson() {
				this.$store.dispatch('request', {
					url: `course/${this.id}/lesson`
				}).then((res) => {
					this.lessonList = res.data
				}).catch((error) => {
					console.log(error)
				})
			},
			// 跳转详情页
			goConfirm(e) {
				let detail = {
					id: e.id,
					author: e.user.nickname,
					title: e.title,
					thumb: e.thumb,
					price: e.price
				};
				uni.navigateTo({
					url: '../course/confirm?payload=' + encodeURIComponent(JSON.stringify(detail))
				});
			},
			// 报名
			enter(e) {
				this.$store.dispatch('request', {
					url: "course_order",
					method: "POST",
					data: {
						"course_id": e.id,
						"price": e.price
					},
				}).then((res) => {
					console.log(res)
				}).catch((error) => {
					console.log(error)
				})
			},
			lessonPlay(item) {
				if (this.info.price > 0) {
					uni.showToast({
						title: '请先购买',
						icon: "none",
						duration: 800
					})
					return false;
				}

				// #ifndef MP-ALIPAY
				this.videoContext = uni.createVideoContext('myVideo')
				// #endif

				this.lessonSrc = item.video_url
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
		}
	}
</script>

<style lang="scss">
	.header {
		.video-thumb {
			width: 100%;
		}
	}

	.body {
		.title {
			margin: 20upx;
			font-size: 32upx;
			font-weight: bold;
		}

		.desc {
			margin-left: 20upx;

			.price {
				font-size: 24upx;
				color: #ff0000;
			}
		}

		.content {
			margin-bottom: 150rpx;S
			.desc {
				font-size: 30rpx;
			}
		}
	}

	.footer {
		position: fixed;  
		bottom: 30upx;
		width: 100%;

		.buy {
			border-radius: 40upx;
		}
	}
</style>
